Ausrichtung von Elementen im CSS-Gitterlayout

Beim Arbeiten mit Gitterlayouts haben Sie zwei Achsen, gegen die Sie Dinge ausrichten können: die Block-Achse und die Inline-Achse. Die Block-Achse ist die Achse, auf der Blöcke im Blocklayout ausgelegt werden. Wenn Sie zwei Absätze auf Ihrer Seite haben, werden diese untereinander dargestellt. Dies ist die Richtung, die wir als Block-Achse beschreiben.

Die Inline-Achse verläuft quer zur Block-Achse und ist die Richtung, in der Text im regulären Inline-Fluss verläuft.

Wir können den Inhalt innerhalb von Gitterbereichen und die Gitterspuren selbst auf diesen beiden Achsen ausrichten.

Die align-self und align-items Eigenschaften steuern die Ausrichtung auf der Block-Achse. Wenn wir diese Eigenschaften verwenden, ändern wir die Ausrichtung des Elements innerhalb des Gitterbereichs, in dem Sie es platziert haben.

Im folgenden Beispiel haben wir vier Gitterbereiche innerhalb unseres Gitters. Wir können die align-items Eigenschaft auf dem Gittercontainer verwenden, um die Elemente mit den Werten normal, stretch oder <self-position> oder <baseline-position> auszurichten:

• normal
• stretch
• start
• end
• center
• baseline
• first baseline
• last baseline
• auto (nur bei align-self)

Der Standardwert ist normal, was sich für Gittercontainer zu stretch auflöst.

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  grid-auto-rows: 100px;
  grid-template-areas:
    "a a a a b b b b"
    "a a a a b b b b"
    "c c c c d d d d"
    "c c c c d d d d";
  align-items: start;
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

Beachten Sie, dass die Höhe jedes <div>-Kindes durch den Inhalt des <div> bestimmt wird, sobald Sie align-items: start setzen. Im Gegensatz dazu, wenn Sie align-items vollständig weglassen, streckt sich die Höhe jedes <div>, um seinen Gitterbereich auszufüllen.

Die align-items Eigenschaft setzt die align-self Eigenschaft für alle Kindergitterelemente. Das bedeutet, dass Sie die Eigenschaft individuell setzen können, indem Sie align-self direkt auf ein Gitterelement anwenden.

In diesem nächsten Beispiel verwenden wir die align-self Eigenschaft, um die unterschiedlichen Ausrichtungswerte zu demonstrieren. Der erste Bereich zeigt das Standardverhalten von align-self, das in diesem Fall zu stretch aufgelöst wird. Das zweite Element hat einen align-self Wert von start, das dritte end und das vierte center.

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  grid-auto-rows: 100px;
  grid-template-areas:
    "a a a a b b b b"
    "a a a a b b b b"
    "c c c c d d d d"
    "c c c c d d d d";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
  align-self: start;
}
.item3 {
  grid-area: c;
  align-self: end;
}
.item4 {
  grid-area: d;
  align-self: center;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

Das Standardverhalten für align-self ist, vom align-items Wert des Gittercontainers zu erben, bei dem das normal Standard ist, sich zu stretch aufzulösen, außer bei Elementen, die ein intrinsisches Seitenverhältnis haben, in diesem Fall verhalten sie sich wie start. Der Grund dafür ist, dass wenn Elemente mit einem Seitenverhältnis gestreckt werden, sie verzerrt würden.

Während align-items und align-self Elemente auf der Block-Achse ausrichten, richten justify-items und justify-self Elemente auf der Inline-Achse aus. Die Werte, die Sie auswählen können, ähneln den normal, stretch, <self-position> und <baseline-position> der align-self Eigenschaft, zusammen mit left und right. Die Werte umfassen:

• normal
• start
• end
• left
• right
• center
• stretch
• baseline
• first baseline
• last baseline
• auto (nur bei justify-self)

Sie können dasselbe Beispiel sehen, das für align-items verwendet wird, unten. Dieses Mal wenden wir die justify-self Eigenschaft an.

Auch hier ist der Standard stretch, außer für Elemente mit einem intrinsischen Seitenverhältnis. Das bedeutet, dass Gitterelemente standardmäßig ihren Gitterbereich ausfüllen, es sei denn, Sie ändern die Ausrichtung. In diesem Beispiel zeigt das erste Element den Standardwert der Ausrichtung stretch:

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
  grid-auto-rows: 100px;
  grid-template-areas:
    "a a a a b b b b"
    "a a a a b b b b"
    "c c c c d d d d"
    "c c c c d d d d";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
  justify-self: start;
}
.item3 {
  grid-area: c;
  justify-self: end;
}
.item4 {
  grid-area: d;
  justify-self: center;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

Wie bei align-self und align-items, können Sie justify-items auf den Gittercontainer anwenden, um einen justify-self Wert für alle Gitterelemente innerhalb des Containers festzulegen.

Die place-items Eigenschaft ist eine Kurzschreibweise für align-items und justify-items.

Die place-self Eigenschaft ist eine Kurzschreibweise für align-self und justify-self.

Durch die Kombination der Align- und Justify-Eigenschaften können wir ein Element leicht in einem Gitterbereich zentrieren.

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas:
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
</div>

Wenn Ihre Gitterspuren eine Fläche nutzen, die kleiner ist als der Gittercontainer, können Sie die Gitterspuren selbst innerhalb dieses Containers ausrichten. Die align-content richtet die Spuren auf der Block-Achse aus und justify-content auf der Inline-Achse. Wie bei den *-items und *-item Eigenschaften ist die place-content Eigenschaft eine Kurzschreibweise für align-content und justify-content.

Die Werte für align-content, justify-content und place-content umfassen alle <content-distribution> und <content-position> Werte. Die align-content Eigenschaft akzeptiert auch <baseline-position> Werte und, wie die anderen justify-* Eigenschaften, akzeptiert justify-content auch left und right.

Gültige Schlüsselwörter für place-content umfassen:

• normal
• start
• end
• center
• stretch
• space-around
• space-between
• space-evenly
• baseline
• first baseline
• last baseline
• left
• right

Die align-content Eigenschaft wird auf den Gittercontainer angewendet, da sie auf das gesamte Gitter wirkt.

In diesem Beispiel hat der 500px mal 500px Gittercontainer drei Zeilen- und drei Spalten-Tracks von je 100px mit einem 10px Abstand. Das bedeutet, es gibt innerhalb des Gittercontainers Platz sowohl in Block- als auch in Inlinerichtung.

Standardmäßig sind unsere Gitterspuren in der oberen linken Ecke des Gitters, ausgerichtet an den Startgitterlinien, da das Standardverhalten im Gitterlayout start ist:

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  height: 500px;
  width: 500px;
  gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

Mit derselben CSS und HTML, fügen wir in diesem Beispiel align-content mit dem Wert end zum Container hinzu, sodass die Spuren alle zur Endlinie des Gittercontainers in der Block-Dimension verschoben werden:

.wrapper {
  align-content: end;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  height: 500px;
  width: 500px;
  gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

Wir können auch die <content-distribution> Raumverteilungswerte von space-between, space-around, space-evenly und stretch anwenden. In diesem Beispiel setzen wir align-content, das die Spuren auf der Block-Achse ausrichtet, auf space-between, das die Spuren verteilt:

.wrapper {
  align-content: space-between;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  height: 500px;
  width: 500px;
  gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

Wenn ein Element mehr als eine Gitterspur überspannt, kann die Verwendung eines Raumverteilungswerts dazu führen, dass sich die Elemente in Ihrem Gitter vergrößern, weil der Raum, der zwischen den Spuren hinzugefügt wird, auf das überspannende Element angewendet wird. Daher sollten Sie sicherstellen, dass der Inhalt der Spuren mit dem zusätzlichen Raum zurechtkommt oder dass Sie Ausrichtungseigenschaften auf die Elemente angewendet haben, damit sie zum Start oder Ende anstatt sich zu dehnen verschoben werden.

Im untenstehenden Bild haben wir das Gitter mit zwei verschiedenen align-content Werten platziert, um start und space-between zu vergleichen. Sie können sehen, wie die ersten beiden Elemente, die zwei Zeilen-Tracks überspannen, in dem space-between-Beispiel zusätzliche Höhe angenommen haben, da sie den Raum gewinnen, der aufgrund des freien Raums, der zwischen den drei Reihen verteilt wurde, existiert:

Wir können justify-content verwenden, um dieselbe Art von Ausrichtung auf der Inline-Achse durchzuführen, die wir für die Block-Achse mit align-content verwendet haben.

Mit demselben Beispiel setzen wir justify-content auf space-around. Dies führt erneut dazu, dass Spuren, die mehr als eine Spalten-Spur überspannen, zusätzlichen Raum erhalten:

.wrapper {
  align-content: space-between;
  justify-content: space-around;
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  height: 500px;
  width: 500px;
  gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
}
.item1 {
  grid-area: a;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

Eine andere Möglichkeit, Elemente innerhalb ihres Bereichs auszurichten, ist die Verwendung von Auto-Rändern. Wenn Sie jemals ein Layout im Ansichtsfenster oder ein Block-Level-Element innerhalb seines Elternteils zentriert haben, haben Sie dies möglicherweise getan, indem Sie den rechten und linken Rand des Elements, das Sie zentrieren möchten, auf auto gesetzt haben. Der automatische Rand nimmt den gesamten verfügbaren Raum auf. Wenn der Rand auf beiden Seiten auf auto gesetzt wird, wird das Block-Level-Element in die Mitte gedrückt, da beide Ränder den gesamten Raum einnehmen möchten.

Im nächsten Beispiel hat das Element 1 seine margin-left Eigenschaft auf auto gesetzt. Dies schiebt den Inhalt zur rechten Seite des Bereichs, da der automatische Rand den verfügbaren Raum einnimmt, der nach dem zugewiesenen Raum für den Inhalt verbleibt:

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
  height: 500px;
  width: 500px;
  gap: 10px;
  grid-template-areas:
    "a a b"
    "a a b"
    "c d d";
}
.item1 {
  grid-area: a;
  margin-left: auto;
}
.item2 {
  grid-area: b;
}
.item3 {
  grid-area: c;
}
.item4 {
  grid-area: d;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
  <div class="item4">Item 4</div>
</div>

Verwenden Sie den Gitterinspektor in Ihren Browser-Entwicklertools, um zu sehen, wie das Element ausgerichtet ist:

Alle diese Beispiele waren in Englisch, einer von links nach rechts Sprache. Das bedeutet, dass unsere Startlinien oben und links von unserem Gitter sind, wenn wir in physischen Richtungen denken.

CSS-Gitterlayout und CSS-Box-Ausrichtung arbeiten mit Schreibrichtungen in CSS. Wenn eine von rechts nach links Sprache wie Arabisch angezeigt wird, ist der Beginn des Gitters oben rechts, sodass die Standardeinstellung von justify-content: start für Gitterspuren wäre, auf der rechten Seite des Gitters zu beginnen.

Das Setzen von physischen Eigenschaften, wie das Setzen von Auto-Rändern mit margin-right oder margin-left, oder das absolute Positionieren von Elementen mit den top, right, bottom und left Offsets, respektiert keine Schreibrichtungen. Im Grids, logische Werte und Schreibrichtungen-Leitfaden werden wir diese Interaktion zwischen CSS-Gitterlayout, Box-Ausrichtung und Schreibrichtungen weiter betrachten. Dies wird wichtig sein, wenn Sie Websites entwickeln, die dann in mehreren Sprachen angezeigt werden, oder wenn Sie Sprachen oder Schreibrichtungen in einem Design mischen möchten.

• Grundkonzepte des Gitterlayouts
• Beziehung des Gitterlayouts zu anderen Layoutmethoden
• Gitterlayout mit Zeilenbasierter Platzierung
• Gitter-Vorlagenbereiche
• Gitterlayout mit benannten Gitterlinien
• Automatische Platzierung im Gitterlayout
• Box-Ausrichtung im CSS-Gitterlayout